<!-- 用户管理 - 添加用户  -->
<template>
  <div class="addUser">
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible" width="70%" top="8vh" :before-close="cancel" :close-on-click-modal="false" v-dialogDrag>
      <el-form :model="form" :rules="rules" ref="formWrapper" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="登录用户名" prop="username">
              <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="用户姓名" prop="nickname">
              <el-input v-model="form.nickname" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="form.password" autocomplete="new-password"></el-input>
            </el-form-item>

            <el-form-item label="所属角色" prop="role" class="roleItem">
              <el-select v-model="role" placeholder="请选择" multiple>
                <el-option v-for="item in rolesOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="isDisabled[item.delFlag]">
                  <span class="optionLeft">{{ item.roleName }}</span>
                  <span class="optionRight">{{ item.roleCode }}</span>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="form.mobile" @input="clearNoNum" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="所属单位" prop="dwmc" class="dwbmItem">
              <el-input v-model="form.dwmc" placeholder="请选择"></el-input>
              <el-button class="dwbmSelect" @click="handleCheckDwbm"></el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位级别" prop="dwjb" class="dwjbItem">
              <el-select v-model="form.dwjb" disabled placeholder="">
                <el-option v-for="item in dwjbOptions" :key="item.value" :label="item.text" :value="item.value">
                  <span>{{ item.text }}</span>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="单位类型" prop="dwlx" class="dwlxItem">
              <el-select v-model="form.dwlx" disabled placeholder="">
                <el-option v-for="item in dwlxOptions" :key="item.value" :label="item.text" :value="item.value">
                  <span>{{ item.text }}</span>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="座机" prop="telephone">
              <el-input v-model="form.telephone" @input="clearNoNum" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="传真号" prop="fax">
              <el-input v-model="form.fax" @input="clearNoNum" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="联系地址" prop="address">
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" size="medium">取 消</el-button>
        <el-button type="primary" @click="create" size="medium">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 选择单位编码 -->
    <GetDwbm :treeObj="treeObj" ref="getDwbmRef" @handleGetDwbm="handleGetDwbm"></GetDwbm>
  </div>
</template>

<script>
import { addObj } from '@/api/admin/user';
import { listRoleInfo } from '@/api/admin/role';
import { isvalidatemobile, validateEmail } from '@/utils/validate';
import GetDwbm from "../../../../dialogCommom/GetDwbm";
import { getDictCombo } from '@/api/tools/dict.js';
export default {
  data () {
    const validatePhone = (rule, value, callback) => {
      if (isvalidatemobile(value)[0]) {
        callback(new Error(isvalidatemobile(value)[1]))
      } else {
        callback()
      }
    }
    return {
      dialogFormVisible: false,
      form: {
        username: "", // 登录用户名
        nickname: "", // 用户姓名
        password: "", // 密码
        delFlag: "0", // 有效标志
        mobile: "", // 手机号
        role: [], // 所属角色
        accountStatus: '0', // 账户状态
        telephone: '', // 座机
        fax: '', // 传真
        address: '', // 联系地址
        dwbm: '', // 单位编码
        dwmc: '', // 单位名称
        email: '', // 邮箱
        dwjb: '', // 单位级别
        dwlx: '' // 单位类型
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入登录用户名',
            trigger: 'blur'
          }
        ],
        nickname: [
          {
            required: true,
            message: '请输入用户姓名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 20,
            message: '密码长度在 6 到 20 个字符',
            trigger: 'blur'
          }
        ],
        mobile: [
          {
            required: true,
            trigger: 'blur',
            validator: validatePhone
          }
        ]
      },
      role: [],
      rolesOptions: [],
      isDisabled: {
        0: false,
        1: true
      },
      dwjbDict: 'dict_dwjb', // 单位级别字典分类值
      dwjbOptions: [], // 单位级别下拉框数据
      dwlxDict: 'dict_dwlx', // 单位类型字典分类值
      dwlxOptions: [], // 单位类型下拉框数据
      treeObj: { // 传给选择单位编码组件的值
        type: 'checkbox',
        dwbm: ''
      }
    }
  },

  props: {
    addUserData: {
      type: Object,
      default: function () {
        return {};
      }
    }
  },

  components: {
    GetDwbm
  },

  computed: {},

  watch: {
    addUserData: {
      deep: true,
      handler(newVal, oldVal) {
        if(newVal.dialogFormVisible) {
          const that = this
          that.dialogFormVisible = newVal.dialogFormVisible;
          that.getRoleList();
        }
      }
    }
  },

  created () {},

  mounted () {
    const that = this
    let pam1 = {
      typeCode: that.dwjbDict
    }
    let pam2 = {
      typeCode: that.dwlxDict
    }
    let res1 = getDictCombo(pam1)
    let res2 = getDictCombo(pam2)
    Promise.all([res1, res2]).then(result => {
      that.dwjbOptions = result[0].data
      that.dwlxOptions = result[1].data
    }).catch(reason => {
      that.$message.warning(reason)
    })
  },

  beforeUpdate () {
  //解决列配置引发的滚动条问题
  },

  update () {},

  destroyed () {},

  methods: {
    /** 确定 */
    create() {
      const that = this
      that.bindRoleInfo()
      if (that.form.role.length === 0) {
        that.$message.warning('所属角色不能为空！')
        return false
      }
      if (!that.form.dwmc) {
        that.$message.warning('所属单位不能为空！')
        return false
      }
      that.$refs.formWrapper.validate(valid => {
        if (valid) {
          addObj(that.form).then(() => {
            that.$message.success('创建成功！')
            that.$emit('addUserCallData')
            that.cancel()
          })
        } else {
          return false
        }
      })
    },

    /** 取消 */
    cancel() {
      const that = this
      that.dialogFormVisible = false
      that.role = []
      that.form = {
        username: '',
        nickname: '',
        password: '',
        delFlag: '0',
        mobile: '',
        role: '',
        accountStatus: '0',
        telephone: '',
        fax: '',
        address: '',
        dwbm: '',
        dwmc: '',
        email: '',
        dwjb: '',
        dwlx: ''
      }
    },

    /** 绑定所属角色 */
    bindRoleInfo() {
      const that = this
      that.form.role = []
      that.role.forEach(roleId => {
        const roleInfo = {
          roleId: roleId
        }
        that.form.role.push(roleInfo)
      })
      that.form.sysRoleVoList = that.form.role
    },

    /** 获取角色列表 */
    async getRoleList() {
      const res = await listRoleInfo()
      this.rolesOptions = res.data
    },

    /** 清除"数字"以外的字符 */
    clearNoNum () {
      this.form.mobile = this.form.mobile.replace(/[^\d]/g, '')
    },

    /** 获取单位编码 */
    handleCheckDwbm(){
      this.$refs.getDwbmRef.openDwbm()
    },

    /** 单位编码回传 */
    handleGetDwbm(val){
      const that = this
      if (val.length > 1) {
        that.$message.warning('只能选择一个单位编码！')
        return false
      }
      that.form.dwbm = val[0].data.dwbm
      if (val[0].data.dwmc.indexOf(' ')>0) {
        that.form.dwmc = val[0].data.dwmc.split(' ')[1]
      } else {
        that.form.dwmc = val[0].data.dwmc
      }
      that.form.dwjb = val[0].data.dwjb + ''
      let dwlx = val[0].data.dwbm.substring(0, 2)
      if (that.form.dwbm == '0') {
        that.form.dwlx = '0'
      } else {
        if (dwlx == '00') {
          that.form.dwlx = '1'
        } else {
          that.form.dwlx = '2'
        }
      }
    }
  }
}

</script>
<style lang='scss' scoped>
/deep/ .el-dialog__header {
  padding: 4px 10px 4px;
}
/deep/ .el-dialog__headerbtn {
  top: 10px;
}
/deep/.el-table--scrollable-x .el-table__body-wrapper {
  z-index: 1;
}
/deep/ .el-dialog__footer {
  padding: 5px 10px 5px;
}
.optionLeft {
  float: left;
}
.optionRight {
  float: right;
  color: #8492a6;
  font-size: 13px
}
.dwbmItem /deep/ .el-form-item__content {
  position: relative;
}
.dwbmSelect {
  width: 100%;
  height: 40px;
  text-align: left;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.roleItem /deep/ .el-select {
  width: 100%;
}
.roleItem /deep/ .el-form-item__label:before {
  content: '*';
  color: #F56C6C;
  margin-right: 4px;
}
.dwbmItem /deep/ .el-form-item__label:before {
  content: '*';
  color: #F56C6C;
  margin-right: 4px;
}
.dwjbItem /deep/ .el-select {
  width: 100%;
}
.dwjbItem /deep/ .el-input__suffix-inner {
  display: none;
}
.dwlxItem /deep/ .el-select {
  width: 100%;
}
.dwlxItem /deep/ .el-input__suffix-inner {
  display: none;
}
</style>
